<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>运煤通道弹出框</title>
</head>
<style>
/* 显示隐藏(js调用) */
.dis {
	display: block;
}
.undis {
	display: none;
}

* {
	margin: 0;
	border: 0;
	padding: 0
}
ul, li {
	list-style: none
}
a, a:hover {
	text-decoration: none;
}
body {
	background: #fff;
	font-family: "Microsoft YaHei", arial, sans-serif;
	font-size: 12px;
	color: #000;
}

.ym_win_box{ width:620px; height:525px; padding:20px 30px; box-shadow:0 0px 30px #b9b9b9; background:#fff; position:relative;}
.ym_win_box h2{ font-size:20px; color:#42c8e5; text-align:center;}
.ym_win_box .ym_tabtit{ border-bottom:1px solid #ddd; height:30px;}
.ym_win_box .ym_tabtit a{ font-size:16px; color:#333; padding:0 10px; margin-right:20px;}
.ym_win_box .ym_tabtit .over{ border-bottom:2px solid #00c9ed; padding-bottom:8px;}
.ym_win_box .ym_tit{ font-size:16px; color:#111; background:url(../../resources/images/ym_arrow.gif) no-repeat left; padding-left:12px; margin:15px 0 10px 0; }
.ym_win_box .ym_cont1{color:#666; line-height:20px; font-size:13px;}
.ym_win_box .ym_cont1 a{  color:#666;}
.ym_win_box .ym_cont1 span{ padding:0 8px; font-family:"黑体";font-size:12px;}
.ym_win_box .ym_cont2 table{ border-collapse:collapse;}
.ym_win_box .ym_cont2 table td{ line-height:30px; text-align:center; font-size:14px; color:#666;}
.ym_win_box .ym_cont2 table .tblue{ font-size:17px; color:#00c9ed;}
.ym_win_box .ym_cont3{ font-size:13px; color:#666; line-height:20px; overflow:auto;}
.ym_win_box .ym_cont3 a{ display:block; width:290px; float:left; height:28px; background:url(../../resources/images/ym_arrow2.gif) no-repeat left; padding-left:20px; overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
.ym_win_box .ckzb_btn a{ display:block; width:240px; height:40px; margin:10px auto 5px auto; border:1px solid #00c9ed; line-height:40px; text-align:center; font-size:16px; color:#666;}
.ym_win_box .ckzb_btn a:hover{ color:#00c9ed;}
.ym_win_box .info{ font-size:15px; color:#333; text-align:center;}
.ym_win_box .info span{ font-size:20px; color:#ff201b; padding-left:5px;}
.ym_win_box .close{ position:absolute; top:5px; right:10px; background:url(images/close.gif) no-repeat center; display:block; width:40px; height:40px;}
</style>

<body>
<div class="ym_win_box">
  <a class="close" href="#"></a>
  <h2>${zhanm}</h2>
  <div class="ym_tabtit" id="tab_tit1"><a href="#" class="over">发送</a><a href="#" class="out">到达</a></div>
  <div id="tab_cont1">
      <ul>
         <div class="ym_tit">主要发送地区</div>
         <div class="ym_cont1">${sfaz}</div>
         <div class="ym_tit">发货车数(车)</div>
         <div class="ym_cont2">
           <table width="100%" border="0">
              <tr bgcolor="e1e1e1">
                <td>2017年</td>
                <td>2016年</td>
                <td>2015年</td>
              </tr>
              <tr bgcolor="f1f1f1">
                <td class="tblue">${f2017}</td>
                <td class="tblue">${f2016}</td>
                <td class="tblue">${f2015}</td>
              </tr>
            </table>
         </div>
         <div class="ym_tit">2015年至今发货量较大的交易商</div>
         <div class="ym_cont3">
           	 <c:forEach items="${flist}" var="li"><a>${li.chumrname}</a>
  	 		 </c:forEach>
  	 		 ${fs}
         </div>
         <div class="ckzb_btn"><a  href="javascript:ck(${param.lng},${param.lat});"  >查看周边煤矿</a></div>
         <div class="info">了解更多信息，请联系交易中心<span>0351-6866666</span></div>
      </ul>
      <ul>
         <div class="ym_tit">主要到达地区</div>
         <div class="ym_cont1">${sdaoz}</div>
         <div class="ym_tit">收货车数(车)</div>
         <div class="ym_cont2">
           <table width="100%" border="0">
              <tr bgcolor="e1e1e1">
                <td>2017年</td>
                <td>2016年</td>
                <td>2015年</td>
              </tr>
              <tr bgcolor="f1f1f1">
                <td class="tblue">${d2017}</td>
                <td class="tblue">${d2016}</td>
                <td class="tblue">${d2015}</td>
              </tr>
            </table>
         </div>
         <div class="ym_tit">2015年至今收货量较大的交易商</div>
         <div class="ym_cont3">
          	 <c:forEach items="${dlist}" var="dli"><a>${dli.chumrname}</a>
  	 		 </c:forEach>
  	 		 ${ds}
         </div>
         <div class="ckzb_btn"><a  href="javascript:ck(${param.lng},${param.lat});"  >查看周边煤矿</a></div>
         <div class="info">了解更多信息，请联系交易中心<span>0351-6866666</span></div>
      </ul>
   </div> 
   <script>
 
   function ck(lng,lat) {
	 //  alert("44");
	 var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
	parent.layer.close(index);
   parent.ck(lng,lat);
   }
	  var Tags3=document.getElementById('tab_tit1').getElementsByTagName('a'); 
	  var TagsCnt3=document.getElementById('tab_cont1').getElementsByTagName('ul'); 
	  var len3=Tags3.length; 
	  var flag3=0; //修改默认值
	  for(i=0;i<len3;i++){
		Tags3[i].value = i;
		Tags3[i].onmouseover=function(){changeNav3(this.value)}; 
		TagsCnt3[i].className='undis';			
	  }
		Tags3[flag3].className='over';
		TagsCnt3[flag3].className='dis';
		function changeNav3(v){	
		 
		Tags3[flag3].className='out';
		TagsCnt3[flag3].className='undis';
		flag3=v;	
		Tags3[v].className='over';
		TagsCnt3[v].className='dis';
	  }
  </script>
</div>
</body>
</html>
